<template>
    <el-button style="margin-bottom: 15px;" type="primary" :icon="Edit" @click="onDialog('添加',null)">
        添加轮播图
    </el-button>
  <el-table :data="tableData" stripe style="width: 90%">
    <el-table-column label="图片" >
        <template #default="scope">
            <div class="demo-fit" v-if="scope.row.banner_img.length != 0">
                <el-carousel height="110px" arrow="never">
                    <img :src="scope.row.banner_img"  alt="">
                </el-carousel>
            </div>
            <div v-else style="height: 110px;">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="banner_name" label="优先级"/>

    <el-table-column label="操作">
        <template #default="scope">
            <el-button type="warning" :icon="Edit" circle  @click="onDialog('修改',scope)"/>
            <el-button type="danger" :icon="Delete" circle @click="onDdelete(scope.row)"/>
        </template>
    </el-table-column>
  </el-table>
    <div style="display: flex; justify-content: center; margin: 30px 0;">
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 200]"
        background
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        />
    </div>
  <bannerlog v-if="showDia" :showDia = "showDia" @showDiaf="showDiaf" :title="title" :nid="nid"></bannerlog>
</template>
<script lang='ts' setup>
import { ref, toRefs,reactive,onMounted } from "vue"
import { bannerDeleteApi, bannerListApi, goodsDeleteApi } from "../composables/http"
import {
  Delete,
  Edit,
  UserFilled 
} from '@element-plus/icons-vue'
import bannerlog from "../components/bannerlog.vue";
import { ElMessage  } from 'element-plus'
const title =ref("")
const data =reactive<{
    tableData: {
        banner_id:string
        banner_img:string
        banner_name:number
    }[],
    showDia:boolean,
    nid:number,
    username:string,
    pageSize:number,
    currentPage:number,
    total:number
}>({
    tableData: [
    ],
    showDia:false,
    nid:0,
    username:"",
    pageSize:10,
    currentPage:1,
    total:0,

})
onMounted(()=>{
    data.username = (window.localStorage.getItem('d_user')as string);
    onDataList()
})
const onDataList = async()=>{
    const d = await bannerListApi(data.currentPage,data.pageSize)
    data.tableData = []
    if (d.code == 200){
        d.data.forEach(e =>{
            data.tableData.push({
                "banner_id":e.pk,
                "banner_img":e.fields.banner_img,
                "banner_name":e.fields.banner_name
            })
        })
        data.total = d.count as number
    }
}

const onDialog = (v:string, scope:any)=>{
    if (scope){
        data.nid = scope.row.banner_id
    }
    data.showDia = true
    title.value = v
    
}
const onDdelete = async(v:any)=>{
    const d = await bannerDeleteApi(v.banner_id)
    if(d.code == 200){
        ElMessage.error("删除成功")
        onDataList()
    }
}
const showDiaf = (val:boolean)=>{
    data.showDia = val
    onDataList()
}
const CurrentChange = ()=>{
    onDataList()
}
const SizeChange = ()=>{
    onDataList()
}
const { tableData, showDia, nid, pageSize, currentPage, total }= toRefs(data)
</script>
<style lang='scss' scoped>

</style>